<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-carcard animate__animated animate__fadeIn">
			<view class="header flex align-center flex-between">
				<view></view>
				<image
					class="close"
					src="/static/images/iconclose.png"
					mode="aspectFill"
					@click="router.back()"
				></image>
			</view>
			<view class="content">
				<view class="main">
					<view class="top flex align-center flex-between">
						<view class="flex align-center">
							<image
								class="img"
								src="/static/images/avatar.jpg"
								mode="aspectFill"
							></image>
							<view>
								<view class="name">京N·PX095</view>
								<view class="type">蔚来 NIO ES8</view>
							</view>
						</view>
						<image class="icon" src="/static/images/msg.png" mode="aspectFill"></image>
					</view>
					<view class="banner">
						<cl-banner
							:list="banner"
							radius="0"
							height="300rpx"
							:arrow="2"
							v-model="index"
						></cl-banner>
						<view class="text" v-if="index == 0"> *{{ $t("carcard.text") }} </view>
						<view class="no flex flex-center align-center" v-else>
							{{ $t("carcard.num") }}：
							<view class="font">F930988</view>
						</view>
					</view>
					<view class="list flex">
						<view class="li" v-for="(item, index) in list" :key="index">
							<image class="img" :src="item.img" mode="aspectFill"></image>
							<view class="text">{{ item[cache.lang] }}</view>
						</view>
					</view>
				</view>
				<Serve class="mt30"></Serve>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Serve from "@/components/serve.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const index = ref(0);
const app = useApp();
const ui = useUi();
const banner = ref([
	{ url: "/static/images/qrcodebanner.jpg" },
	{ url: "/static/images/carbanner.jpg" },
]);
const change = (e: any) => {
	console.log(e);
};
const list = ref([
	{
		zh: "违章缴费",
		en: "Pay the fees",
		img: "/static/images/carcard_img01.png",
	},
	{
		zh: "保险提醒",
		en: "Insurance",
		img: "/static/images/carcard_img02.png",
	},
	{
		zh: "年检提醒",
		en: "Annual inspection",
		img: "/static/images/carcard_img03.png",
	},
	{
		zh: "行驶证",
		en: "Driving license",
		img: "/static/images/carcard_img04.png",
	},
	{
		zh: "加油",
		en: "Refuel",
		img: "/static/images/carcard_img05.png",
	},
	{
		zh: "事故处理",
		en: "Accident",
		img: "/static/images/carcard_img06.png",
	},
	{
		zh: "洗车服务",
		en: "Car washing",
		img: "/static/images/carcard_img07.png",
	},
	{
		zh: "代驾服务",
		en: "Substitute driving",
		img: "/static/images/carcard_img08.png",
	},
	{
		zh: "停车服务 ",
		en: "Pull up",
		img: "/static/images/carcard_img09.png",
	},
]);
</script>

<style lang="scss" scoped>
.page-carcard {
	.header {
		width: 100%;
		height: 230rpx;
		// background: #0c81f7;
		background-image: url("/static/images/topbg.png");
		background-size: 100% 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		.close {
			width: 48rpx;
			height: 48rpx;
			margin-top: -50rpx;
		}
	}
	.content {
		padding: 0 30rpx;
		position: relative;
		top: -70rpx;
		.main {
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			.top {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #dddddd;
				.img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 30rpx;
					border-radius: 80%;
					margin-left: 30rpx;
				}
				.name {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
				.type {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.icon {
					width: 88rpx;
					height: 88rpx;
				}
			}
			.banner {
				padding: 60rpx 0;
				.text {
					text-align: center;
					margin-top: 68rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.no {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					margin-top: 37rpx;
					.font {
						height: 60rpx;
						background: #f1f1f1;
						border-radius: 10rpx;
						border: 1px solid #dddddd;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 60rpx;
						padding: 0 20rpx;
					}
				}
			}
			.list {
				border-top: 1rpx solid #dddddd;
				padding: 6rpx;
				flex-wrap: wrap;
				.li {
					flex: 0 0 33.3333%;
					height: 214rpx;
					padding: 6rpx;
					position: relative;
					box-sizing: border-box;
					overflow: hidden;
					.img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					.text {
						position: absolute;
						width: 100%;
						height: 100%;
						text-align: center;
						line-height: 214rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: #ffffff;
						top: 0;
					}
				}
			}
		}
	}
}
</style>
